<!--
 * createor: zc
 * email: zc8023zs@163.com
 * create_time: 2020/3/14 13:46:24
 *-->
<template>
  <el-container>
    <el-header style="margin:20px 10px 0 10px;height:auto">
      <el-form :inline="true" :model="listQuery">
        <el-form-item>
          <el-button type="primary" icon="el-icon-edit" @click="onAdd">{{$t('table.add')}}</el-button>
        </el-form-item> 
      </el-form>
    </el-header>
    <el-main>
      <el-table
        :key="tableKey"
        :data="listData" :height="tableHeight"
        highlight-current-row border fit
        v-loading="tabLoading"
      >
        <el-table-column type="index" label=" " width="50" align="center" :index="table_index" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="id" label="自增主键" width="120" align="center" :show-overflow-tooltip="true"/>
        <el-table-column prop="dept_id" label="部门id" width="120" align="center" :show-overflow-tooltip="true"/>
        <el-table-column prop="role_id" label="角色id" width="120" align="center" :show-overflow-tooltip="true"/>
        <el-table-column prop="user_number" label="员工编号" width="120" align="center" :show-overflow-tooltip="true"/>
        <el-table-column prop="user_name" label="员工登录账号" width="120" align="center" :show-overflow-tooltip="true"/>
        <el-table-column prop="real_name" label="员工真实姓名" width="120" align="center" :show-overflow-tooltip="true"/>
        <el-table-column prop="passwd" label="登录密码" width="120" align="center" :show-overflow-tooltip="true"/>
        <el-table-column prop="gender" label="男=1 女=2" width="120" align="center" :show-overflow-tooltip="true"/>
        <el-table-column prop="mobile" label="手机号码" width="120" align="center" :show-overflow-tooltip="true"/>
        <el-table-column prop="email" label="电子邮箱" width="120" align="center" :show-overflow-tooltip="true"/>
        <el-table-column prop="status" label="0=禁用 1=启用" width="120" align="center" :show-overflow-tooltip="true"/>
        <el-table-column prop="create_ip" label="注册IP" width="120" align="center" :show-overflow-tooltip="true"/>
        <el-table-column prop="create_time" label="创建时间" width="120" align="center" :formatter="dateFormat" :show-overflow-tooltip="true"/>
        <el-table-column prop="last_ip" label="最后登录IP" width="120" align="center" :show-overflow-tooltip="true"/>
        <el-table-column prop="last_visit" label="最后登录时间" width="120" align="center" :formatter="dateFormat" :show-overflow-tooltip="true"/>
        <el-table-column prop="login_count" label="登录次数" width="120" align="center" :show-overflow-tooltip="true"/>
        <el-table-column prop="init_default" label="1=默认 0=非默认" width="120" align="center" :show-overflow-tooltip="true"/>
        <el-table-column prop="error_count" label="错误次数" width="120" align="center" :show-overflow-tooltip="true"/>
        <el-table-column prop="token" label="用户token凭证" width="120" align="center" :show-overflow-tooltip="true"/>
        <el-table-column prop="old_token" label="旧token" width="120" align="center" :show-overflow-tooltip="true"/>
        <el-table-column prop="need_new_pwd" label="0=否 1=是" width="120" align="center" :show-overflow-tooltip="true"/>
        <el-table-column prop="group_id" label="用户组id" width="120" align="center" :show-overflow-tooltip="true"/>
        <el-table-column prop="user_type" label="管理端=1" width="120" align="center" :show-overflow-tooltip="true"/>
        <el-table-column prop="mp_c_id" label="用户端小程序id" width="120" align="center" :show-overflow-tooltip="true"/>
        <el-table-column prop="mp_b_id" label="商户小程序id" width="120" align="center" :show-overflow-tooltip="true"/>
        <el-table-column prop="mp_r_id" label="配送小程序id" width="120" align="center" :show-overflow-tooltip="true"/>
        <el-table-column prop="wx_pay_id" label="微信支付商户号" width="120" align="center" :show-overflow-tooltip="true"/>
        <el-table-column prop="wx_pay_secret" label="微信支付秘钥" width="120" align="center" :show-overflow-tooltip="true"/>
        <el-table-column prop="run_type" label="接入方式" width="120" align="center" :formatter="commentFormat" :show-overflow-tooltip="true"/>
        <el-table-column prop="commission_rate" label="抽佣比例" width="120" align="center" :show-overflow-tooltip="true"/>
        <el-table-column prop="delivery_radius" label="配送距离(km)" width="120" align="center" :show-overflow-tooltip="true"/>
        <el-table-column
          :label="$t('table.actions')"
          align="left"
          min-width="230"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-dropdown @command="onInfoPages">
              <span class="el-dropdown-link">
                <i class="el-icon-s-tools el-icon--left"></i>功能操作<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item icon="el-icon-edit" :command="{a:scope,b:'edit'}">{{$t('table.edit')}}</el-dropdown-item> 
                <el-dropdown-item icon="el-icon-search" :command="{a:scope,b:'info'}">{{$t('table.info')}}</el-dropdown-item> 
                <el-dropdown-item icon="el-icon-delete" :command="{a:scope,b:'delete'}">{{$t('table.delete')}}</el-dropdown-item> 
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="pagecnt>1"
        :total="total"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.size"
        @pagination="getList"
      />
    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
      <el-form ref="dataForm" :model="formData" label-width="200px" style="padding:5% 5% 0 5%">
          <input type="hidden" v-model="formData.id"/>
        <el-form-item label="部门id：">
          <el-input v-model="formData.dept_id" placeholder="请输入部门id"></el-input>
        </el-form-item>
        <el-form-item label="角色id：">
          <el-input v-model="formData.role_id" placeholder="请输入角色id"></el-input>
        </el-form-item>
        <el-form-item label="员工编号：">
          <el-input v-model="formData.user_number" placeholder="请输入员工编号"></el-input>
        </el-form-item>
        <el-form-item label="员工登录账号：">
          <el-input v-model="formData.user_name" placeholder="请输入员工登录账号"></el-input>
        </el-form-item>
        <el-form-item label="员工真实姓名：">
          <el-input v-model="formData.real_name" placeholder="请输入员工真实姓名"></el-input>
        </el-form-item>
        <el-form-item label="登录密码：">
          <el-input v-model="formData.passwd" placeholder="请输入登录密码"></el-input>
        </el-form-item>
        <el-form-item label="男=1 女=2：">
          <el-input v-model="formData.gender" placeholder="请输入男=1 女=2"></el-input>
        </el-form-item>
        <el-form-item label="手机号码：">
          <el-input v-model="formData.mobile" placeholder="请输入手机号码"></el-input>
        </el-form-item>
        <el-form-item label="电子邮箱：">
          <el-input v-model="formData.email" placeholder="请输入电子邮箱"></el-input>
        </el-form-item>
        <el-form-item label="0=禁用 1=启用：">
          <el-input v-model="formData.status" placeholder="请输入0=禁用 1=启用"></el-input>
        </el-form-item>
        <el-form-item label="注册IP：">
          <el-input v-model="formData.create_ip" placeholder="请输入注册IP"></el-input>
        </el-form-item>
        <el-form-item label="创建时间：">
          <el-input v-model="formData.create_time" placeholder="请输入创建时间"></el-input>
        </el-form-item>
        <el-form-item label="最后登录IP：">
          <el-input v-model="formData.last_ip" placeholder="请输入最后登录IP"></el-input>
        </el-form-item>
        <el-form-item label="最后登录时间：">
          <el-input v-model="formData.last_visit" placeholder="请输入最后登录时间"></el-input>
        </el-form-item>
        <el-form-item label="登录次数：">
          <el-input v-model="formData.login_count" placeholder="请输入登录次数"></el-input>
        </el-form-item>
        <el-form-item label="1=默认 0=非默认：">
          <el-input v-model="formData.init_default" placeholder="请输入1=默认 0=非默认"></el-input>
        </el-form-item>
        <el-form-item label="错误次数：">
          <el-input v-model="formData.error_count" placeholder="请输入错误次数"></el-input>
        </el-form-item>
        <el-form-item label="用户token凭证：">
          <el-input v-model="formData.token" placeholder="请输入用户token凭证"></el-input>
        </el-form-item>
        <el-form-item label="旧token：">
          <el-input v-model="formData.old_token" placeholder="请输入旧token"></el-input>
        </el-form-item>
        <el-form-item label="0=否 1=是：">
          <el-input v-model="formData.need_new_pwd" placeholder="请输入0=否 1=是"></el-input>
        </el-form-item>
        <el-form-item label="用户组id：">
          <el-input v-model="formData.group_id" placeholder="请输入用户组id"></el-input>
        </el-form-item>
        <el-form-item label="管理端=1：">
          <el-input v-model="formData.user_type" placeholder="请输入管理端=1"></el-input>
        </el-form-item>
        <el-form-item label="用户端小程序id：">
          <el-input v-model="formData.mp_c_id" placeholder="请输入用户端小程序id"></el-input>
        </el-form-item>
        <el-form-item label="商户小程序id：">
          <el-input v-model="formData.mp_b_id" placeholder="请输入商户小程序id"></el-input>
        </el-form-item>
        <el-form-item label="配送小程序id：">
          <el-input v-model="formData.mp_r_id" placeholder="请输入配送小程序id"></el-input>
        </el-form-item>
        <el-form-item label="微信支付商户号：">
          <el-input v-model="formData.wx_pay_id" placeholder="请输入微信支付商户号"></el-input>
        </el-form-item>
        <el-form-item label="微信支付秘钥：">
          <el-input v-model="formData.wx_pay_secret" placeholder="请输入微信支付秘钥"></el-input>
        </el-form-item>
        <el-form-item label="接入方式：">
            <el-select v-model="formData.run_type" placeholder="请选择">
                <el-option
                  v-for="item in run_typeSelectData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="抽佣比例：">
          <el-input v-model="formData.commission_rate" placeholder="请输入抽佣比例"></el-input>
        </el-form-item>
        <el-form-item label="配送距离(km)：">
          <el-input v-model="formData.delivery_radius" placeholder="请输入配送距离(km)"></el-input>
        </el-form-item>
        <el-form-item label="数据版本字段：">
          <el-input v-model="formData.version_id" placeholder="请输入数据版本字段"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
          <el-button
            type="primary"
            v-if="curdAction=='update' || curdAction=='add'"
            @click="onSave"
            :loading="saveLoading" v-text="$t('table.save')"
          ></el-button> 
        <el-button @click="dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>

    </el-main>
  </el-container>
</template>
<style scoped>
body .app-container .el-container,
body .app-container .el-header,
body .app-container .el-main,
body .el-container,
body .el-header,
body .el-main {
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
</style>
<script>
import Pagination from "@/components/Pagination";
import { Loading } from "element-ui";
import {
  qr_sys_usersSelecttree,
  qr_sys_usersSelectpage,
  qr_sys_usersSelect,
  qr_sys_usersAdd,
  qr_sys_usersUpdate,
  qr_sys_usersDel,
  qr_sys_usersInfo
} from '@/api/project/wmyw/project_wmyw_qr_sys_users'
export default {
  name: "a_wmywa_qr_sys_users",
  components: { Pagination, },
  filters: {},
  data() {
    return {
      dialogTitle: `城市运营中心编辑`,
      curdAction: "",
      saveLoading: false,
      delLoading: false,
      tabLoading: false,
      dialogFormVisible: false,
      tableKey: 'wmyw_qr_sys_users_table',
      listData: null,
      total: 0,
      pagecnt: 0,
      tableHeight: (window.innerHeight-100),
      listQuery: {
        page: 1,
        size: 20,
      },
      formData: {
        id: null, 
        dept_id: null, 
        role_id: null, 
        user_number: null, 
        user_name: null, 
        real_name: null, 
        passwd: null, 
        gender: null, 
        mobile: null, 
        email: null, 
        status: null, 
        create_ip: null, 
        create_time: null, 
        last_ip: null, 
        last_visit: null, 
        login_count: null, 
        init_default: null, 
        error_count: null, 
        token: null, 
        old_token: null, 
        need_new_pwd: null, 
        group_id: null, 
        user_type: null, 
        mp_c_id: null, 
        mp_b_id: null, 
        mp_r_id: null, 
        wx_pay_id: null, 
        wx_pay_secret: null, 
        run_type: null, 
        commission_rate: null, 
        delivery_radius: null, 
        version_id: null, 
      },
      run_typeSelectData: [
        {value: 1,label: '按年付费'},
        {value: 2,label: '按交易额抽佣'},
        {value: 3,label: '独立部署'},
      ],
    };
  },
  mounted(){
    let that =this;
    window.onresize=()=>{
      this.tableHeight = (window.innerHeight-100);
    }
  },
  created() {
    this.getList();
  },
  methods: {
    onSearch(command){
      if(command && command=='all'){
        this.resetQuery();
      }
      this.listQuery.page=1;
      this.getList();
    },
    onInfoPage(scope){
      var view = this.$store.state.permission.routesMap["/wmyw/qr_sys_users_info"];
      this.$router.push({ path: view.path, query: {m_id:view.code_aes,id:scope.row.id} })
    },
    onInfoPages(commend){
      if(commend.b=='edit')this.onEdit(commend.a);
      if(commend.b=='info')this.onInfoPage(commend.a);
      if(commend.b=='delete')this.onDel(commend.a);
    },
    reset(){
      this.formData = {
        id: null, 
        dept_id: null, 
        role_id: null, 
        user_number: null, 
        user_name: null, 
        real_name: null, 
        passwd: null, 
        gender: null, 
        mobile: null, 
        email: null, 
        status: null, 
        create_ip: null, 
        create_time: null, 
        last_ip: null, 
        last_visit: null, 
        login_count: null, 
        init_default: null, 
        error_count: null, 
        token: null, 
        old_token: null, 
        need_new_pwd: null, 
        group_id: null, 
        user_type: null, 
        mp_c_id: null, 
        mp_b_id: null, 
        mp_r_id: null, 
        wx_pay_id: null, 
        wx_pay_secret: null, 
        run_type: null, 
        commission_rate: null, 
        delivery_radius: null, 
        version_id: null, 
      };
    },
    onAdd(){
      this.dialogFormVisible=true;
      this.curdAction = "add";
      this.dialogTitle=`城市运营中心添加`;
      this.reset();
    },
    onEdit(data){
      this.onInfo(data);
      this.dialogFormVisible=true;
      this.curdAction = "update";
      this.dialogTitle=`城市运营中心编辑`;
      this.reset();
    },
    onSave(){
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          this.saveLoading = true;
          if (this.curdAction == "add") {
            qr_sys_usersAdd(this.$qs.stringify(this.formData)).then(r => {
                this.getList();
                this.reset();
                this.curdAction = '';
                this.saveLoading  = false;
                this.dialogFormVisible = false
            }).catch(()=>{
              this.saveLoading=false;
            });
          } else if (this.curdAction == "update") {
            qr_sys_usersUpdate(this.$qs.stringify(this.formData)).then(r => {
                this.getList();
                this.reset();
                this.curdAction = '';
                this.saveLoading  = false;
                this.dialogFormVisible = false
            }).catch(()=>{
              this.saveLoading=false;
            });
          }
        }
      });
    },
    onDel(data){
        var that = this;
        this.$confirm('确定删除?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            qr_sys_usersDel(that.$qs.stringify({id:data.row.id})).then(r=>{
                that.getList();
                that.reset();
                that.curdAction = '';
                that.delLoading  = false;
                that.$notify({
                    message:"删除成功",
                    type: "success"
                });
            }); 
        }).catch(() => {
            this.$notify({
                message: "已取消删除",
                type: "info"
            }); 
        });
    },
    onInfo(data){
        qr_sys_usersInfo({id:data.row.id}).then(r=>{
            this.formData.id=r.dataSingle.id;
            this.formData.dept_id=r.dataSingle.dept_id;
            this.formData.role_id=r.dataSingle.role_id;
            this.formData.user_number=r.dataSingle.user_number;
            this.formData.user_name=r.dataSingle.user_name;
            this.formData.real_name=r.dataSingle.real_name;
            this.formData.passwd=r.dataSingle.passwd;
            this.formData.gender=r.dataSingle.gender;
            this.formData.mobile=r.dataSingle.mobile;
            this.formData.email=r.dataSingle.email;
            this.formData.status=r.dataSingle.status;
            this.formData.create_ip=r.dataSingle.create_ip;
            this.formData.create_time=r.dataSingle.create_time;
            this.formData.last_ip=r.dataSingle.last_ip;
            this.formData.last_visit=r.dataSingle.last_visit;
            this.formData.login_count=r.dataSingle.login_count;
            this.formData.init_default=r.dataSingle.init_default;
            this.formData.error_count=r.dataSingle.error_count;
            this.formData.token=r.dataSingle.token;
            this.formData.old_token=r.dataSingle.old_token;
            this.formData.need_new_pwd=r.dataSingle.need_new_pwd;
            this.formData.user_type=r.dataSingle.user_type;
            this.formData.mp_c_id=r.dataSingle.mp_c_id;
            this.formData.mp_b_id=r.dataSingle.mp_b_id;
            this.formData.mp_r_id=r.dataSingle.mp_r_id;
            this.formData.wx_pay_id=r.dataSingle.wx_pay_id;
            this.formData.wx_pay_secret=r.dataSingle.wx_pay_secret;
            this.formData.run_type=r.dataSingle.run_type;
            this.formData.commission_rate=r.dataSingle.commission_rate;
            this.formData.delivery_radius=r.dataSingle.delivery_radius;
            this.formData.version_id=r.dataSingle.version_id;
        });
    },
    dateFormat(row, column, cellValue, index){
      return this.$moment(cellValue).format("YYYY/MM/DD");
    }, 
    commentFormat(row, column, cellValue, index){
      try {
        var comment = "";
        if(column.property=='run_type'){
          comment='接入方式:按年付费=1 按交易额抽佣=2 独立部署=3';
        }
        var array = comment.split(':')[1].split(' ');
        var obj = {};
        for(var i=0;i<array.length;i++){
          var split = array[i].split('=');
          obj[split[1]]=split[0];
        }
        if(obj[cellValue]) return obj[cellValue];
        return cellValue;
      } catch (error) {
        return cellValue;
      }
    },
    table_index(index) {
      return (this.listQuery.page - 1) * this.listQuery.size + index + 1;
    },
    getList() {
      this.tabLoading=true;
      qr_sys_usersSelectpage(this.$qs.stringify(this.listQuery,{ indices: false })).then(r=>{
        this.listData = r.dataArray.dataList;
        this.total = r.dataArray.dataCount;
        this.pagecnt = r.dataArray.pageCount;
        this.tabLoading=false;
      }).catch(()=>{
        this.tabLoading=false;
      });
    }
  }
};
</script>